﻿
<style>
    #cblXfn td { padding: 0 5px; }
    #cblXfn label { margin-left: 5px; }
</style>

<div data-ng-controller="BlogRollController">
    <form id="form" action="">
        <div id="modal-edit" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" ng-click="focusInput=false" aria-hidden="true"><i class="fa fa-times"></i></button>
                        <h4 class="modal-title">{{modalTitle}}</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-horizontal clearfix">
                            <div class="form-group">
                                <label class="control-label col col-md-2" for="txtTitle">{{lbl.title}}</label>
                                <div class="col col-md-10">
                                    <input type="text" class="form-control" id="txtTitle" name="txtTitle" data-ng-model="editItem.Title" focus-me="focusInput" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col col-md-2" for="txtDescription">{{lbl.description}}</label>
                                <div class="col col-md-10">
                                    <input type="text" class="form-control" id="txtDescription" name="txtDescription" data-ng-model="editItem.Description" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col col-md-2" for="txtWebsite">{{lbl.website}}</label>
                                <div class="col col-md-10">
                                    <input type="text" class="form-control" id="txtWebsite" name="txtWebsite" data-ng-model="editItem.BlogUrl" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col col-md-2" for="txtFeedUrl">{{lbl.url}}</label>
                                <div class="col col-md-10">
                                    <input type="text" class="form-control" id="txtFeedUrl" name="txtFeedUrl" data-ng-model="editItem.FeedUrl" />
                                </div>
                            </div>
                            <hr />
                            <div>
                                <label class="control-label">XFN tag</label>
                                <table id="cblXfn" class="nowidth" border="0">
                                    <tbody>
                                        <tr>
                                            <td><input id="cblXfn_0" type="checkbox" data-ng-model="xfn.contact"><label for="cblXfn_0">contact</label></td>
                                            <td><input id="cblXfn_1" type="checkbox" data-ng-model="xfn.acquaintance"><label for="cblXfn_1">acquaintance </label></td>
                                            <td><input id="cblXfn_2" type="checkbox" data-ng-model="xfn.friend"><label for="cblXfn_2">friend </label></td>
                                            <td><input id="cblXfn_3" type="checkbox" data-ng-model="xfn.met"><label for="cblXfn_3">met</label></td>
                                            <td><input id="cblXfn_4" type="checkbox" data-ng-model="xfn.coworker"><label for="cblXfn_4">co-worker</label></td>
                                            <td><input id="cblXfn_5" type="checkbox" data-ng-model="xfn.colleague"><label for="cblXfn_5">colleague </label></td>
                                        </tr>
                                        <tr>
                                            <td><input id="cblXfn_6" type="checkbox" data-ng-model="xfn.coresident"><label for="cblXfn_6">co-resident</label></td>
                                            <td><input id="cblXfn_7" type="checkbox" data-ng-model="xfn.neighbor"><label for="cblXfn_7">neighbor </label></td>
                                            <td><input id="cblXfn_8" type="checkbox" data-ng-model="xfn.child"><label for="cblXfn_8">child</label></td>
                                            <td><input id="cblXfn_9" type="checkbox" data-ng-model="xfn.parent"><label for="cblXfn_9">parent</label></td>
                                            <td><input id="cblXfn_10" type="checkbox" data-ng-model="xfn.sibling"><label for="cblXfn_10">sibling</label></td>
                                            <td><input id="cblXfn_11" type="checkbox" data-ng-model="xfn.spouse"><label for="cblXfn_11">spouse</label></td>
                                        </tr>
                                        <tr>
                                            <td><input id="cblXfn_12" type="checkbox" data-ng-model="xfn.kin"><label for="cblXfn_12">kin</label></td>
                                            <td><input id="cblXfn_13" type="checkbox" data-ng-model="xfn.muse"><label for="cblXfn_13">muse</label></td>
                                            <td><input id="cblXfn_14" type="checkbox" data-ng-model="xfn.crush"><label for="cblXfn_14">crush</label></td>
                                            <td><input id="cblXfn_15" type="checkbox" data-ng-model="xfn.date"><label for="cblXfn_15">date</label></td>
                                            <td><input id="cblXfn_16" type="checkbox" data-ng-model="xfn.sweetheart"><label for="cblXfn_16">sweetheart</label></td>
                                            <td><input id="cblXfn_17" type="checkbox" data-ng-model="xfn.me"><label for="cblXfn_17">me</label></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button data-ng-click="save()" class="btn btn-success pull-right btn-tabkey"><i class="fa fa-save"></i>{{lbl.save}}</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="focusInput=false"><i class="fa fa-ban"></i>{{lbl.cancel}}</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-header clearfix">
            <h2 class="page-title pull-left">{{lbl.blogroll}} </h2>
            <a href="" ng-click="modalNew()" class="btn btn-success btn-sm btn-hasicon pull-left"><i class="fa fa-plus"></i>New</a>
            <div class="btn-group befdv pull-left">
                <button ng-click="processChecked('delete')" ng-disabled="itemsChecked() === false" class="btn btn-sm btn-danger" title="{{lbl.doDelete}}"><i class="fa  fa-trash"></i></button>
            </div>
        </div>
        <div class="content-inner">
            <table class="table table-item-blogroll">
                <thead>
                    <tr>
                        <th class="item-checkbox"><input type="checkbox" id="chkAll" data-ng-click="checkAll($event)" /></th>
                        <th class="item-title">{{lbl.title}}</th>
                        <th class="item-desc">{{lbl.description}}</th>
                        <th class="item-state">XFN <a href="http://gmpg.org/xfn/intro" title="XFN" target="_blank"><i class="fa fa-info-circle"></i></a></th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="item in pagedItems[currentPage]">
                        <td class="item-checkbox"><input type="checkbox" data-ng-model="item.IsChecked" /> </td>
                        <td class="item-title">
                            <a title="{{item.Title}}" href="" ng-click="modalEdit(item.Id)" class="text-ellipsis pull-left">{{item.Title}}</a>
                            <a title="{{item.FeedUrl}}" class="external-link pull-right" target="_blank" href="{{item.FeedUrl}}"><i class="fa fa-external-link"></i></a>
                        </td>
                        <td class="item-desc"><span class="pull-left">{{item.Description}}</span></td>
                        <td class="item-state"><span class="pull-left">{{item.Xfn}}</span></td>
                    </tr>
                    <tr id="tr-spinner"><td colspan="4"><div id="div-spinner"><i class="fa fa-spinner fa-spin"></i></div></td></tr>
                </tbody>
            </table>
            <div class="text-right pagination-wrapper" ng-if="items.length > itemsPerPage">
                <ul class="pagination pagination-sm">
                    <li data-ng-class="{disabled: currentPage == 0}">
                        <a data-ng-click="prevPage()">« {{lbl.prev}}</a>
                    </li>
                    <li data-ng-repeat="n in range(pagedItems.length)" data-ng-class="{active: n == currentPage}" data-ng-click="setPage()">
                        <a data-ng-bind="n + 1">1</a>
                    </li>
                    <li data-ng-class="{disabled: currentPage == pagedItems.length - 1}">
                        <a data-ng-click="nextPage()">{{lbl.next}} »</a>
                    </li>
                </ul>
            </div>
        </div>
    </form>
</div>
